<script setup>
  import { onMounted, onUnmounted } from "vue";
  import AMapLoader from "@amap/amap-jsapi-loader";
  import { ref } from 'vue';
  // let map = null;
  //点标记显示内容
  // 接收父组件传递的查询参数
  const props = defineProps({
    GuidEntity: {
      type: Array,
      required: true
    }
  });

  const map =ref()
  onMounted(() => {
  AMapLoader.load({
    key: "db17a89f9c977760ebb6a8ca01e092b8", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
      console.log(props.GuidEntity)
      let center = [];
      if (null!=props.GuidEntity && props.GuidEntity.length > 0) {
        let first = props.GuidEntity[0].content[0]
        center = [first.longitude, first.latitude]
      }

      map.value = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: center, // 初始化地图中心点位置
      });

      if (null!=props.GuidEntity && props.GuidEntity.length > 0) {
        let x = 0;
        let markers = [];
        for (let index = 0; index < props.GuidEntity.length; index++) {
          const element = props.GuidEntity[index].content;
          for (let j = 0; j < element.length; j++) {
            x = x+1;
            const plan = element[j];
            let markerContent = '' +
              '<div style=" position: relative;">' +
              '   <img style=" width: 25px;height: 34px;" src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">' +
              '   <div style="position: absolute;top: 5px;right: 1px;width: 15px;height: 15px;font-size: 12px;color:#fff">' + x + '</div>' +
              '</div>';
              console.log(plan)
            if (plan.longitude && plan.latitude) {
              let position = new AMap.LngLat(plan.longitude, plan.latitude); //Marker 经纬度
              let marker = new AMap.Marker({
                position: position,
                content: markerContent, //将 html 传给 content
                offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
              });
              markers.push(marker)
            }
          }
        }
        console.log(markers)
        map.value .add(markers);
      }

    })
    .catch((e) => {
      console.log(e);
    });
  });

  onUnmounted(() => {
    map.value ?.destroy();
  });
</script>

<template>
  <div id="container" style="position: relative; height: 100%; width: 100%" ></div>
</template>

<style scoped>
  /* #container {
    width: 100%;
    height: 600px;
  } */

  .custom-content-marker {
    position: relative;
    width: 25px;
    height: 34px;
  }

  .custom-content-marker img {
    width: 25px;
    height: 34px;
  }

  .custom-content-marker .close-btn {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 15px;
    height: 15px;
    font-size: 12px;
    background: #ccc;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 15px;
    box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
  }

  .custom-content-marker .close-btn:hover {
    background: #666;
  }
</style>